import React, { Component } from 'react';
import { Card, Button, Modal } from 'antd';

import './ui.less';

class Modals extends Component {
	state = {
		show1: false,
		show2: false,
		show3: false,
		show4: false,
	}
	handleOpen = (type) => {
		this.setState({[type]: true})
	}
	handleOpenConfirm = (type) => {
		Modal[type]({
			title: '确认？',
			content: 'nihao',
			okText: "好的",
			cancelText: "算了",
			onOk(){
				console.log("ok")
			},
			onCancel(){
				console.log("click cancel")
			}
		})
	}
	render(){
		return (
			<div>
				<Card title="基本弹框" className="card-wrap">
					<Button onClick={ () => this.handleOpen("show1")}>Open</Button>
					<Button onClick={ () => this.handleOpen("show2")}>自定义弹框</Button>
					<Button onClick={ () => this.handleOpen("show3")}>距顶部20px</Button>
					<Button onClick={ () => this.handleOpen("show4")}>水平垂直居中</Button>
				</Card>
				<Card title="确认弹框" className="card-wrap">
					<Button onClick={ () => this.handleOpenConfirm("confirm")}>confirm</Button>
					<Button onClick={ () => this.handleOpenConfirm("info")}>info</Button>
					<Button onClick={ () => this.handleOpenConfirm("success")}>success</Button>
					<Button onClick={ () => this.handleOpenConfirm("warning")}>warning</Button>
				</Card>
				<Modal
					title="React"
					visible={this.state.show1}
					onCancel={()=>{
						this.setState({show1:false})
					}}
				>
					<p>你好</p>
				</Modal>
				<Modal
					title="React"
					okText="好的"
					cancelText="算了"
					visible={this.state.show2}
					onCancel={()=>{
						this.setState({show2:false})
					}}
				>
					<p>你好</p>
				</Modal>
				<Modal
					title="React"
					style={{top: 20}}
					visible={this.state.show3}
					onCancel={()=>{
						this.setState({show3:false})
					}}
				>
					<p>你好</p>
				</Modal>
				<Modal
					title="React"
					wrapClassName="vertical-center-modal"
					visible={this.state.show4}
					onCancel={()=>{
						this.setState({show4:false})
					}}
				>
					<p>你好</p>
				</Modal>
			</div>
		)
	}
}

export default Modals;